<!DOCTYPE html>
<!-- <html xmlns:th="http://www.thymeleaf.org"> -->
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="../js/layui/css/layui.css">
<script src="../js/layui/layui.all.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/WebCalendar.js"></script>
</head>
<body>
<script type="text/javascript">
$(function (){
	seach();
	
})
var $  = layui.jquery;
var tabobj;
var tabR;
var tabA;
	function seach(){
		//alert(2)
	
		var name = $("#name").val();
		/* var tel = $("#tel").val();
		var emile = $("#emile").val(); */
		var btime = $("#btime").val();
		var etime = $("#etime").val();
		var islock = $("#islock").val();
		var sort=$("#sort option:selected").val();
		
		layui.use(['form','laypage', 'layer', 'table', 'carousel', 'upload', 'element','slider'], function(){
			  var laydate = layui.laydate //日期
			  ,laypage = layui.laypage //分页
			  layer = layui.layer //弹层
			  ,table = layui.table //表格
			  ,carousel = layui.carousel //轮播
			  ,upload = layui.upload //上传
			  ,form = layui.form
			  ,element = layui.element; //元素操作
			  var slider = layui.slider //滑块
			   if( btime !="" && etime != ""){
				  if(btime > etime || btime == etime){
				  	layer.msg("时间区间输入不规范，请重新输入");
				  	return;
				  }
				  	  
			  } 
			//执行渲染
			tabobj =  table.render({
			    elem: '#userd',//指定原始表格元素选择器（推荐id选择器）
			    toolbar:"#udiv"
			    ,url:"showAllByWhere"
			    ,method:'post',
			    page:true,
			    where:{
			    	name : name,
			    	btime : btime,
			    	etime : etime,
			    	islock : islock,
			    	sort : sort
			    	
			    	
			    }
			   ,width:1700
			    ,height: 715 //容器高度
			 
			    ,  cols:  [[ //标题栏
			        {checkbox: true,}
			        ,{field: 'id', title: 'ID', width: 80}
			        ,{field: 'loginName', title: '用户名', width: 100}
			        ,{field: 'isLockOut', title: '锁定', width: 80}
			        ,{field: 'createTime', title: '创建时间', width: 100}
			        ,{field: 'lastLoginTime', title: '最后登陆时间', width: 100}
			       // ,{field: 'lockTime', title: '锁定时间', width: 120}
			        ,{field: 'psdWrongTime', title: '错误次数', width: 80}
			        ,{field: 'protectEmail', title: '邮箱', width: 80}
			        ,{field: 'protectMTel', title: '电话', width: 80}
			        ,{fixed: 'right', width:390, align:'center', toolbar: '#barDemo'}
			      ]]
			  });
			
			});
		
	}
	 var id;
	layui.use(["table","form","layer"],function(){
		var table=layui.table;
		var form=layui.form;
		var layer=layui.layer;
		//监听工具条
		  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
		    var data = obj.data //获得当前行数据
		    ,layEvent = obj.event; //获得 lay-event 对应的值
		   id = data.id;
		    var pa = "ysd123"
		    form.val("fm",data)
		    if(layEvent === 'rest'){
		    	layer.confirm('确认重置密码吗',function(index){
		 		   layer.close(index);
		 		   $.ajax({
		 			   url:"updUser",
		 			   type:"post",
		 			   data:{
		 				   id:data.id,
		 				   password:pa
		 			   },
		 			   dataType:"json",
		 			   success:function(res){
		 				   if(res.success){
		 					  layer.msg(res.message)
		 		    			  tabobj.reload();
		 				   }else{
		 					  layer.msg(res.message)
		 		    			  tabobj.reload();
		 				   }
		 			   }
		 		   })
		 	   })
		    } else if(layEvent === 'del'){
		      layer.confirm('真的删除该用户么', function(index){
		    	  layer.close(index);
		 		   $.ajax({
		 			   url:"delUser",
		 			   type:"post",
		 			   data:{
		 				   id:data.id
		 			   },
		 			   dataType:"json",
		 			   success:function(res){
		 				   if(res.success){
		 					  layer.msg(res.message)
		 		    			  tabobj.reload();
		 				   }else{
		 					  layer.msg(res.message)
		 		    			  tabobj.reload();
		 				   }
		 			   }
		 		   })
		      });
		    }  else if(layEvent === 'jsuo'){
				    if(data.isLockOut=='否'){
				 	   layer.msg("用户处于正常状态，无需此操作");
				     }else{
				    	 layer.confirm('真的解除锁定么', function(index){
					    	  layer.close(index);
					 		   $.ajax({
					 			   url:"deblockUser",
					 			   type:"post",
					 			   data:{
					 				   id:data.id
					 			   },
					 			   dataType:"json",
					 			   success:function(res){
					 				   if(res.success){
					 					  layer.msg(res.message)
					 		    			  tabobj.reload();
					 				   }else{
					 					  layer.msg(res.message)
					 		    			  tabobj.reload();
					 				   }
					 			   }
					 		   })
					      });
				     }

			     
			    }   else if(layEvent === 'suod'){
				    if(data.isLockOut=='是'){
					 	   layer.msg("用户处于锁定状态，无需此操作");
					     }else{
					    	 layer.confirm('确认锁定该用户么', function(index){
						    	  layer.close(index);
						 		   $.ajax({
						 			   url:"blockUser",
						 			   type:"post",
						 			   data:{
						 				   id:data.id
						 			   },
						 			   dataType:"json",
						 			   success:function(res){
						 				   if(res.success){
						 					  layer.msg(res.message)
						 		    			  tabobj.reload();
						 				   }else{
						 					  layer.msg(res.message)
						 		    			  tabobj.reload();
						 				   }
						 			   }
						 		   })
						      });
					     }

				     
				    }else if(layEvent === 'edit'){
		    	layer.open({
					title:'修改用户',
					area:['400px','600px'],
					//closeBtn:0,
					type:1,
					content:$("#upddiv")
				})
		    } else if(layEvent === 'sez'){
		    	$(function(){
		    		tabA=  table.render({
						  elem:"#tabAllRoleUser",
						  url:"selAllRoles",
						 // page:true,
						  cols:  [[ //标题栏	
							  {field : 'para',title : '',width : 50,templet : function(d) {
									return "<input class='checkAllse' type='checkbox' value='"+d.id+"'>";
								}},
						    {field: 'id', title: 'ID'}
						    ,{field: 'name', title: '角色名称'}
						  ]]
						});
					  
					  
					  tabR= table.render({
						  elem:"#tabUserRoles",
						  url:"selRolesByUser",//selUseridRoles
						  //page:true,
						  where:{
							  id:data.id
						  },
						  cols:  [[ //标题栏	
							  {field : 'para',title : '',width : 50,templet : function(d) {
									return "<input class='checkAll' type='checkbox' value='"+d.id+"'>";
								}},

						    {field: 'id', title: 'ID'}
						    ,{field: 'name', title: '角色名称'}
						  ]]
						});
						
				  })
				  
				  layer.open({
					  type:1,
					  title:"您在给"+data.loginName+"设置角色",
					  area:['600px','500px'],
					 // closeBtn:0,
					  content:$("#AllRoleUserdiv")
					  
				  })
		    }
		  });
	})
	function addseach(){
		layui.use(["layer"],function(){
			var layer=layui.layer;
			
				layer.open({
					title:'添加用户',
					area:['400px','600px'],
					type:1,
					//closeBtn:0,
					content:$("#adddiv")
				})
		
		})
	}
	//监听所有角色的复选框
/* 	var roleid;
	layui.use("table",function(){
		
		var table=layui.table;
		table.on('checkbox(AllRolesFilter)',function(obj){		
			  var data=obj.data;
			  roleid=data.id;		 		
		  })
	}) */
	//监听当前用户角色的复选框
/* 	var uroleid
	layui.use("table",function(){
		
		var table=layui.table;
		table.on('checkbox(userRoleFilter)',function(obj){		
			  var data=obj.data;
			  uroleid=data.id;		 		
		  })
	}) */
	//给用户设置角色
	function addUserRoles(){
		var checks = $(".checkAllse[type='checkbox']:checked");
		// alert(checks.length);
		var ids = checks.val();
		if (checks.length <= 0) {
			alert("请选中要添加的角色！");
			return;
		}
		if (checks.length > 1) {
			alert("一次只能添加一個角色！");
			return;
		}
		/* for ( var i = 0; i < checks.length; i++) {
			if (ids == "") {
				ids += checks[i].value;
			} else {
				ids += ",";
				ids += checks[i].value;

			}

		} */
		//alert(ids);
		$.ajax({
			 url:"addRolersToUser",
				type:"post",
				data:{
					ids : ids,
					id : id
					
				},
				dataType:"json",
				success:function(res){
					if(res.success){
						 layer.msg(res.message);
						 tabR.reload();
						 tabA.reload();
						// return;
					}else{
						 layer.msg(res.message);
						 tabA.reload();
					}
				} 
		   })
	}
	//刪除用戶角色
	function removeUserRoles(){
		var checks = $(".checkAll[type='checkbox']:checked");
		// alert(checks.length);
		if (checks.length <= 0) {
			alert("请选中要刪除的角色！");
			return;
		}
		if(checks.length >1){
			alert("一次只能刪除一個角色！");
			return;
		}
		
		var ids = checks.val();
		$.ajax({
			 url:"delRolesByUser",
				type:"post",
				data:{
					ids : ids,
					id : id
					
				},
				dataType:"json",
				success:function(res){
					if(res.success){
						 layer.msg(res.message);
						 tabR.reload();
						// return;
					}else{
						 layer.msg(res.message);
						 tabR.reload();
					}
				} 
		   })
	}
	
	//判断用户是否存在
	function chesname(){
		//alert(1)
		   var  uname = $("#loginName").val();
		   if(uname !="" && uname !=null){
		   $.ajax({
			   url:"checkLoginName",
				type:"post",
				data:{
					loginName : uname
				},
				dataType:"json",
				success:function(res){
					if(res.success){
						 layer.msg("该用户名已存在，请重新输入");
						 $("#loginName").val("");
						 $("#uspan").html("该用户名已存在，请重新输入")
						// return;
					}else{
						 //layer.msg("该用户名已存在，请重新输入");
						 $("#uspan").html("")
					}
				} 
		   })
		   }
	}
	

	
	//添加
 function addseachbtn(){
	 layui.use('layer',function(){
		 var layer = layui.layer;
		 

	 var name = $("#loginName").val();
	 var password = $("#password").val();
	 var qpassword = $("#qpassword").val();
	 var nlength=name.length;
		var plength = password.length;
		//alert(plength)
	 var aemile = $("#aemile").val();
	 var atel = $("#atel").val();
	 
	 if(name =="" || name ==null  ){
		 //chesname();
		 	if(nlength<2 && nlength>6){
		 		//layer.msg("请输入2-6位字符的用户名")；
				 
				 alert("请输入2-6位字符的用户名");
				 $("#loginName").val(""); 
			}
		 	if(sNaN(name)){
		 		alert("用户名不能输入数字");
				 $("#loginName").val(""); 
		 	}
		 
			 alert("用户名不能为空");
		 return; 
	 }
	 if(password =="" || password ==null){
		  if( plength < 5 && plength>12){
			 alert("请输入5-12位字符的密码");
			 $("#password").val("");
		} 
		 alert("密码不能为空");
		 return; 
	 }
	 
	  if($("#password").val() != $("#qpassword").val()){
			// layer.msg("两次密码不一样，请重新输入")；
			// $("#pspan").html();
			layer.msg("两次密码不一样，请重新输入")
			 $("#qpassword").val("");
			 return;
		 } 
		 if(aemile == "" || aemile ==null){
			 layer.msg("邮箱不能为空");
			 return;
		}
		 var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
		    //var obj = document.getElementById("mazey"); //要验证的对象
		    if(!reg.test(aemile)){ //正则验证不通过，格式不对
		        layer.msg("邮箱格式错误,请重新输入!");
		        return;
		    }
		if(atel == "" || atel ==null){
			layer.msg("手机号不能为空");
			 return;
		}
		if(!/^1\d{10}$/.test($("#atel").val())){
            layer.msg("请输入正确的手机号");
            return;
          }
		  $("#pspan").html("");
			
			 $.ajax({
					 url:"addUser",
					type:"post",
					data:{
						loginName : name,
						password : password,
						protectEmail : aemile,
						protectMTel : atel
					},
					dataType:"json",
					success:function(res){
						if(res.success){
							 alert(res.message);
							// 
							//关闭layer
							layer.close(layer.index);
							 tabobj.reload();
							// $("#adddiv").hide();
						}else{
							 alert(res.message);
								//关闭layer
						layer.close(layer.index);
								tabobj.reload();
							 //$("#adddiv").hide();
						}
					}
			 })
	 })
}
	//修改
 function updateSaveBtn(){
	 layui.use('layer',function(){
		 var layer = layui.layer;
		var updateprotectEmail=$("#updateprotectEmail").val();
		var updateprotectMtel=$("#updateprotectMtel").val();
		var updateid=$("#updateid").val();
		if(updateprotectEmail == "" || updateprotectEmail ==null){
			 layer.msg("邮箱不能为空");
			 return;
		}
		if(updateprotectMtel == "" || atel ==updateprotectMtel){
			layer.msg("手机号不能为空");
			 return;
		}
		if(!/^1\d{10}$/.test($("#updateprotectMtel").val())){
           layer.msg("请输入正确的手机号");
           return;
         }
			$.ajax({
				url:"updUser",
				type:"post",
				data:{
					protectEmail:updateprotectEmail,
					protectMTel:updateprotectMtel,
					id:updateid
				},
				dataType:"json",
				success:function(res){
					if(res.success){
						alert(res.message);
						layer.close(layer.index);
						tabobj.reload();
						//$("#upddiv").hide();
					}else{
						alert(res.message);
						layer.close(layer.index);
						tabobj.reload();
					//	$("#upddiv").hide();
					}
				}
			})
	 })
	}
/* 	function addclose(){
		layui.use('layer',function (){
			var layer = layui.layer;
			if('确认关闭吗？'){
				layer.close(layer.index);
				tabobj.reload();
				$("#adddiv").hide();
			}
		})
	}
	function updclose(){
		layui.use('layer',function (){
			var layer = layui.layer;
			if('确认关闭吗？'){
				layer.close(layer.index);
				tabobj.reload();
				$("#upddiv").hide();
			}
		})
	}
	function rolclose(){
		layui.use('layer',function (){
			var layer = layui.layer;
			if('确认关闭吗？'){
				
				layer.close(layer.index);
				tabobj.reload();
				$("#AllRoleUserdiv").hide();
			}
		})
	} */
</script>
<script type="text/html" id="barDemo">

  
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="rest">密码重置</a>
<a class="layui-btn layui-btn-xs" lay-event="jsuo">解除锁定</a>
<a class="layui-btn layui-btn-xs" lay-event="suod">锁定</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="sez">角色分配</a>
</script>

	<table id="userd" lay-filter="demo" style="width:1100px;"></table>
	<div id="udiv" style="display: none;">
		<form class="layui-form"  id="seavhform">

			<div class="layui-form-item">
				
				
				<div class="layui-inline">
					<!-- <label class="layui-form-label">手机号：</label>
					<div class="layui-input-inline">
						<input type="tel" id="tel" name="phone" lay-verify="phone"  minlength = "11", isMobile = true
							placeholder="请输入手机号" autocomplete="off" class="layui-input">
					</div> -->
					
					
					<label class="layui-form-label">用户登录名：</label>
						<div class="layui-input-inline">
							<input type="tel" id="name" name="phone" 
								placeholder="请输入用户登录名" autocomplete="off"   class="layui-input">
						</div><!-- 
						<label class="layui-form-label">邮箱：</label>
					<div class="layui-input-inline">
						<input type="text" id="emile" name="email"  email=true  placeholder="请输入邮箱"  autocomplete="off" class="layui-input">
					</div> -->
					
					<!-- <label class="layui-form-label">最后登陆日期</label>
				      <div class="layui-input-inline">
				        <input type="text" name="date" id="btime" lay-verify="date" placeholder="yyyy-MM-dd"  onfocus="SelectDate(this,'yyyy-MM-dd')" readonly="readonly" autocomplete="off" class="layui-input">
				       ~ <input type="text" name="date" id="etime" lay-verify="date" placeholder="yyyy-MM-dd"  onfocus="SelectDate(this,'yyyy-MM-dd')" readonly="readonly"   autocomplete="off" class="layui-input">
				      </div> -->
				      
				      <label class="layui-form-label">用户创建日期</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="price_min" placeholder="yyyy-MM-dd" onfocus="SelectDate(this,'yyyy-MM-dd')" autocomplete="off" class="layui-input" id="btime">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="price_max" placeholder="yyyy-MM-dd"  onfocus="SelectDate(this,'yyyy-MM-dd')"  autocomplete="off" class="layui-input" id="etime">
      </div>
				      
				      
				</div><!-- <!-- 
				<div class="layui-inline">
						
					</div>
				<div class="layui-inline">
					
				</div> -->
			</div>
			<div class="layui-form-item">
			   <div class="layui-inline">
				      <label class="layui-form-label">锁定</label>
				    <div class="layui-input-inline">
				     
						      <select id="islock" name="quiz2" readonly="readonly">
						        <option value="">请选择</option>
						        <option value="是">是</option>
						        <option value="否">否</option>
						      </select>
    				</div>
    				<label class="layui-form-label">排序方式</label>
				    <div class="layui-input-inline">
				     
						      <select id="sort" name="quiz2" readonly="readonly">
						        <option value="">请选择</option>
						        <option value="createTime">用户创建时间</option>
						        <option value="lastLoginTime">用户最后登录时间</option>
						      </select>
    				</div>
    				 <input type="button"  value="检索" class="layui-btn"  onclick="seach()">
			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			      <input type="button"  value="添加" class="layui-btn"  onclick="addseach()">
			  </div>
			  <div class="layui-input-block">
			     
			  </div>
				    <!-- 
				    > -->
				</div>

		</form>
	</div>
	
	<!-- 添加窗体  -->
	<div id="adddiv" style="display: none;">
		<form class="layui-form"  id="addform">
		<div class="layui-form-item">
			    <label class="layui-form-label">请输入用户名</label>
			    <div class="layui-input-block">
			     	 <input type="text" id="loginName" name="loginName" autocomplete="off"  onblur="chesname()"  placeholder="请输入用户名(必填)" class="layui-input">
			 	 </div>
			 	 <span id="uspan" style="font-style:background-color: red;"></span> 
			 	
 		 </div>
 		 <div class="layui-form-item">
			    <label class="layui-form-label">请输入密码</label>
			    <div class="layui-input-block">
			     	 <input type="password" id="password" name="title"   required="true"  autocomplete="off"  placeholder="请输入密码(必填)" class="layui-input">
			 	 </div>
 		 </div>
 		 <div class="layui-form-item">
			    <label class="layui-form-label">请再次输入密码</label>
			    <div class="layui-input-block">
			     	 <input type="password" id="qpassword" name="title"    required="true"  autocomplete="off"  placeholder="只能和密码一样()必填)" class="layui-input">
			 	 </div>
			 	 <span id="pspan" style="font-style:background-color: red;"></span>
 		 </div>
 		 <div class="layui-form-item">
			    <label class="layui-form-label">请输入邮箱</label>
			    <div class="layui-input-block">
			     	 <input type="text" id="aemile" name="title" autocomplete="off"     placeholder="请输入邮箱(必填)" class="layui-input">
			 <!-- 		<span id="espan" style="font-style:background-color: red;"></span> -->
			 	 </div>
 		 </div>
 		  		 <div class="layui-form-item">
			    <label class="layui-form-label">请输入手机号</label>
			    <div class="layui-input-block">
			     	 <input type="text" id="atel" name="title" autocomplete="off"  placeholder="请输入手机号(必填)" class="layui-input">
			 	 </div>
 		 </div>
 		 <div class="layui-form-item">
		    <div class="layui-input-block">
		      <input type="button"  value="立即提交" class="layui-btn"  onclick="addseachbtn()">
		      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
  		</div>
  		</form>
	</div>
	
	
	<!-- 修改窗体 -->
<div id="upddiv" style="display:none">
<form class="layui-form" lay-filter="fm" action="">
<br>
<input type="hidden" name="id" id="updateid">
  <div class="layui-form-item">
    <label class="layui-form-label">登录名</label>
    <div class="layui-input-inline">
      <input type="text" id="updateloginName" name="loginName"  readonly="readonly" placeholder="请输入登录名" autocomplete="off" class="layui-input">
    </div>
    <span id="updateloginNamespan" style="color: red"></span>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-inline">
      <input type="text" id="updateprotectEmail" name="protectEmail"     placeholder="请输入邮箱" autocomplete="off" class="layui-input">
    </div>
    <span id="updateprotectEmailspan" style="color: red"></span>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">手机号</label>
    <div class="layui-input-inline">
      <input type="text" id="updateprotectMtel" name="protectMTel"   placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
    <span id="updateprotectMtelspan" style="color: red"></span>
  </div>
   <div class="layui-form-item">
    <div class="layui-input-block">
      <input class="layui-btn" value="保存" onclick="updateSaveBtn()" style="width:100px"></input>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  </form>
  </div>
  <!-- 设置角色窗体 -->
  <!-- 所有角色 -->
<div id="AllRoleUserdiv" style="display:none">
<div style="width:200px;">
<table id="tabAllRoleUser" lay-filter="AllRolesFilter"></table>
</div>
<div style="width:200px;float: right;margin-top: -724px;">
<table id="tabUserRoles" lay-filter="userRoleFilter"></table>
</div>

<div id="userBtn" style="margin-left:250px;margin-top: -560px;">
<input value="添加" onclick="addUserRoles()" style="width:100px" class="layui-btn"></input>
<br>
<br>
<input value="移除" style="width:100px" onclick="removeUserRoles()" class="layui-btn"></input>
<br>
<br>
</div>

</div>
  
</body>